<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
  <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<!-- Custom styles for this template -->
<link href="../static/css/signin.css" rel="stylesheet">

<script>
    $(function(){
    //短信验证码
    //1. 找标签:btn1
    //2. 定时器完成: 显示时间变化!!!
    //setInterval(函数, 时间)
    //3.难点: 定时器中函数,不断减1, 见到<0终止!!!!
    var btn1 = $('#sendsms');
    var count=5; // 倒计时数量 一般为60秒!
    var timer =null; //定时器
    //事件
    btn1.click(function(){
    phone = $('#phone').val(); //val:值
    if(phone==''){
    alert('请输入电话号码');
    return false;
    }
    //ajax
    $.ajax({
    type: "get",
    url: "/lore/sms_send/",
    data:"phone="+phone,

    success: function(msg){
    console.log( "Data Saved: " + msg );
    //转换为json
    obj = eval("("+msg+")");
    console.log('结果:'+obj.Message);
    if(obj.Message=='OK'){
    $('#msg').html('短信发送成功')
    }else{
    $('#msg').html('短信发送失败')
    }
    },
    error:function(res){
    //状态码
    console.log(res.status)
    }
    });
    //end --发送ajax
    //特效 start
    //禁用
    $(this).attr("disabled",'true');
    var _this= $(this);
    //定时器实现时间每次减少1
    timer = setInterval(function(){
    count--;
    console.log("剩余时间:"+count);
    if(count>=0){
    //this表示对象!!!! 表示定时器!!!!
    //this.innerHTML="时间剩余"+ count+"秒";
    _this.html(count+"秒s后重发")
    }else {
        _this.disabled = false;
        clearInterval(timer);
        _this.html("重新发送");
        count = 5;
        $('#sendsms').removeAttr("disabled")
    }
    },1000);
    });
    //特效 end
    //短信验证
        //change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
    $("#smscode").change(function(){
    //验证ajax
    var phone = $('#phone').val();
    var code = $(this).val();
    $.ajax({
    type: "get",
    url: "/lore/sms_check/",
    data:"phone="+phone+"&code="+code,
    success: function(msg){
    console.log( "Data Saved: " + msg );
    //已经为json
    if(msg.code=='200'){
    $('#msg').html('验证码正确')
    }else{
    $('#msg').html('手机验证码输入错误')
    }
    },
    error:function(res){
    //状态码
    console.log(res.status);
    alert('连接服务器失败')
    }
    });
    //end验证ajax
    })
    //短信验证end
    })
</script>

<body>

<form class="form-signin" role="form" method="POST" action="{% url 'lore:sms_check' %}">
        {% csrf_token %}
      <h2 class="form-signin-heading">请注册</h2>

{#      <select name="user_grade" id="input${1/(\w+)/\u\1/g}" class="form-control" required="required">#}
{#        <option value="1">一级读者</option>#}
{#        <option value="2">二级读者</option>#}
{#        <option value="3">三级读者</option>#}
{#      </select>#}
    <br>
{#      <input type="text" name='user_code' class="form-control" placeholder="编号" required autofocus>#}
{#      <input type="text" name='username' class="form-control" placeholder="用户名" required>#}
{#      <input type="password" name='password' class="form-control" placeholder="密码" required>#}
    <input type="text" name='phone' id='phone' class="form-control" placeholder="电话" required>
    <input type="button" name="sendsms"  id='sendsms' value="发送" class="btn btn-lg btn-primary btn-block" style="width: 100px;float:right;" >
    <input type="text" name="code" id="smscode" placeholder="验证码" style="width: 150px;height: 40px" class="form-control">
    <br>
    <span id="msg"></span>

{#    图文验证#}

     <!--图形验证码 django2.0直接调用表单项{{ register_form.captcha }}-->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <!-- 手动生成验证码表单项--->

<!--{#        <img src="/captcha/image/2f3f82e5f7a054bf5caa93b9b0bb6cc308fb701" alt="captcha" class="captcha" />#}-->
        <!--<img src="{{ image_url }}" alt="captcha" class="captcha" />-->
<!--{#        <input id="id_captcha_0" name="captcha_0" type="hidden" value="2f3f82e5f7a054bf5caa93b9b0bb6cc308fb7011" />#}-->
        <!--<input id="id_captcha_0" name="captcha_0" type="hidden" value="{{ hashkey }}" />-->
        <!--<input autocomplete="off" id="id_captcha_1" name="captcha_1" type="text"  placeholder="输入验证码"/>-->

      </div>
    <br><br><br>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button class="btn btn-lg btn-primary btn-block" >提交</button>

      </div>


    </form>
</body>
{#图文ajax#}
{#<script>#}
{#    $(function () {#}
{#        //刷新#}
{#        //attr() 方法设置或返回被选元素的属性和值。#}
{#        //val() 方法返回或设置被选元素的 value 属性。#}
{#        $('.captcha').click(function () {#}
{#            $.getJson('/message/img_fresh/',function (result) {#}
{#                    $('.captcha').attr('src',result['image_url']);#}
{#            $('#id_captcha_0').val(result['hashkey'])#}
{#            });#}
{#                return False#}
{#        });#}
{#    //验证#}
{#        //blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。#}
{#    $('#id_captcha_1').blur(function () {#}
{#        console.log('用户输入的：'+$('#id_captcha_1').val());#}
{#        //获取输入框和隐藏字段id_captcha_0的值#}
{#        code=$('#id_captcha_1').val();#}
{#        hashkey=$('#id_captcha_0').val();#}
{#        $.getJSON('/message/img_check',{'code':code,'hashkey':hashkey},#}
{#        function (res) {#}
{#            //1，验证码正确，0，错误#}
{#            alert('....验证结果'+res);#}
{#            if(res.status) {#}
{#                $('#msg').html('验证码正确')}#}
{#            else#}
{#                {$('#msg').html('验证码错误')}#}
{#        })#}
{##}
{#    })#}
{#    })#}
{#</script>#}
</html>























{#<!DOCTYPE html>#}
{#<html lang="en">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>Title</title>#}
{#</head>#}
{#<body>#}
{#<li>#}
{#    <label for="">手机号码:</label>#}
{#   <input type="text" placeholder="11位数的手机号码" id="mobile" name="phone"/>#}
{#   <span class="error_tip">提示信息</span>#}
{#</li>#}
{#<li>#}
{#   <label for="">验证码:</label>#}
{#   <input type="text" name="code" placeholder="请输入手机验证码" style="width: 140px;">#}
{#   &nbsp;&nbsp;#}
{#   <input type="button" value=" 获取验证码" id="sendsms" style="width: 100px;margin-left: 10px">#}
{#    <span id="msg"></span>#}
{#</li>#}
{##}
{##}
{#<script>#}
{#    $(function(){#}
{#    //短信验证码#}
{#    //1. 找标签:btn1#}
{#    //2. 定时器完成: 显示时间变化!!!#}
{#    //setInterval(函数, 时间)#}
{#    //3.难点: 定时器中函数,不断减1, 见到<0终止!!!!#}
{#    var btn1 = $('#sendsms');#}
{#    var count=5; // 倒计时数量 一般为60秒!#}
{#    var timer =null; //定时器#}
{#    //事件#}
{#    btn1.click(function(){#}
{#    phone = $('#phone').val(); //val:值#}
{#    if(phone==''){#}
{#    alert('请输入电话号码');#}
{#    return false;#}
{#    }#}
{#    //ajax#}
{#    $.ajax({#}
{#    type: "get",#}
{#    url: "/lore/sms_send/",#}
{#    data:"phone="+phone,#}
{##}
{#    success: function(msg){#}
{#    console.log( "Data Saved: " + msg );#}
{#    //转换为json#}
{#    obj = eval("("+msg+")");#}
{#    console.log('结果:'+obj.Message);#}
{#    if(obj.Message=='OK'){#}
{#    $('#msg').html('短信发送成功')#}
{#    }else{#}
{#    $('#msg').html('短信发送失败')#}
{#    }#}
{#    },#}
{#    error:function(res){#}
{#    //状态码#}
{#    console.log(res.status)#}
{#    }#}
{#    });#}
{#    //end --发送ajax#}
{#    //特效 start#}
{#    //禁用#}
{#    $(this).attr("disabled",'true');#}
{#    var _this= $(this);#}
{#    //定时器实现时间每次减少1#}
{#    timer = setInterval(function(){#}
{#    count--;#}
{#    console.log("剩余时间:"+count);#}
{#    if(count>=0){#}
{#    //this表示对象!!!! 表示定时器!!!!#}
{#    //this.innerHTML="时间剩余"+ count+"秒";#}
{#    _this.html(count+"秒s后重发")#}
{#    }else {#}
{#        _this.disabled = false;#}
{#        clearInterval(timer);#}
{#        _this.html("重新发送");#}
{#        count = 5;#}
{#        $('#sendsms').removeAttr("disabled")#}
{#    }#}
{#    },1000);#}
{#    });#}
{#    //特效 end#}
{#    //短信验证#}
{#        //change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。#}
{#    $("#smscode").change(function(){#}
{#    //验证ajax#}
{#    var phone = $('#phone').val();#}
{#    var code = $(this).val();#}
{#    $.ajax({#}
{#    type: "get",#}
{#    url: "/message/sms_check/",#}
{#    data:"phone="+phone+"&code="+code,#}
{#    success: function(msg){#}
{#    console.log( "Data Saved: " + msg );#}
{#    //已经为json#}
{#    if(msg.code=='200'){#}
{#    $('#msg').html('验证码正确')#}
{#    }else{#}
{#    $('#msg').html('手机验证码输入错误')#}
{#    }#}
{#    },#}
{#    error:function(res){#}
{#    //状态码#}
{#    console.log(res.status);#}
{#    alert('连接服务器失败')#}
{#    }#}
{#    });#}
{#    //end验证ajax#}
{#    })#}
{#    //短信验证end#}
{#    })#}
{#</script>#}
{#</body>#}
{#</html>#}